<template>
  <div>
    <div ref="viewerContainer" id="viewer"></div>
    
    <!-- 图片选择区域 - Flex布局 -->
    <div class="image-selector">
      <h3>选择全景图片</h3>
      <div class="image-list">
        <div 
          v-for="(image, index) in images" 
          :key="index"
          class="image-item"
          :class="{ active: currentImageIndex === index }"
          @click="switchPanorama(index)"
        >
          <img :src="image.src" :alt="image.name" />
          <span class="image-name">{{ image.name }}</span>
        </div>
      </div>
    </div>

    <div v-if="error" class="error">{{ error }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Viewer } from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import roomImage from '@/assets/room.jpg'
import roomImage1 from '@/assets/room1.png'
import roomImage2 from '@/assets/room2.png'
import roomImage3 from '@/assets/room3.png'

const viewerContainer = ref(null)
const error = ref(null)
let viewerInstance = null
const currentImageIndex = ref(0)

// 图片数组
const images = [
  { src: roomImage, name: 'Room' },
  { src: roomImage1, name: 'Room 1' },
  { src: roomImage2, name: 'Room 2' },
  { src: roomImage3, name: 'Room 3' }
]

// 切换全景图
const switchPanorama = (index) => {
  if (viewerInstance && index !== currentImageIndex.value) {
    currentImageIndex.value = index
    viewerInstance.setPanorama(images[index].src)
  }
}

onMounted(async () => {
  try {
    // 检查首张图片是否能正常加载
    await new Promise((resolve, reject) => {
      const img = new Image()
      img.onload = resolve
      img.onerror = () => reject(new Error('图片加载失败'))
      img.src = roomImage
    })

    viewerInstance = new Viewer({
      container: viewerContainer.value,
      panorama: roomImage,
      size: {
        width: '100%',
        height: '70vh',
      },
      navbar: [
        'autorotate',
        'zoom',
        'move',
        'fullscreen'
      ],
      defaultZoomLvl: 0,
    })

    viewerInstance.on('error', (err) => {
      console.error('Viewer error:', err)
      error.value = `全景图加载失败: ${err.message}`
    })

  } catch (err) {
    console.error('初始化失败:', err)
    error.value = `初始化失败: ${err.message}`
  }
})

onUnmounted(() => {
  if (viewerInstance) {
    viewerInstance.destroy()
  }
})
</script>

<style scoped>
#viewer {
  width: 100%;
  height: 70vh;
  position: relative;
}

.image-selector {
  padding: 20px;
}

.image-selector h3 {
  margin-bottom: 15px;
  text-align: center;
}

.image-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.image-item {
  cursor: pointer;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 150px;
  text-align: center;
}

.image-item:hover {
  border-color: #007bff;
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.image-item.active {
  border-color: #007bff;
  box-shadow: 0 0 0 2px #007bff;
}

.image-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}

.image-name {
  display: block;
  padding: 8px;
  background: #f8f9fa;
  font-size: 14px;
}

.error {
  color: red;
  text-align: center;
  padding: 20px;
}

/* 使用深度选择器确保样式生效 */
#viewer :deep(.psv-navbar) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#viewer :deep(.psv-button) {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
</style>